<template>
  <div class="processbar" ref ="processBar" @click="processClick">
      <div class="processline">
          <div class="process" ref = "process"></div>
          <div class="process-btn-wrapper" ref="processBtn"
          @touchstart.prevent ="processTouchStart"
          @touchmove.prevent ="processTouchMove"
          @touchend.prevent ="processTouchEnd">
              <div class="process-btn"></div>
          </div>
      </div>
  </div>
</template>

<script>
import {prefixStyle} from "commom/js/dom.js"
const transform = prefixStyle('transform')
const progressBtnWidth = 16
export default {
    props:{
        percent:{
            type:Number,
            default:0
        }
    },
    created(){
        this.touch = {}
    },
    methods:{
        processTouchStart(e){
            this.touch.initiated = true;
            this.touch.startX = e.touches[0].pageX
            this.touch.left = this.$refs.process.clientWidth;
        },
        processTouchMove(e){
            if(!this.touch.initiated){
                return
            }
            const deltaX = e.touches[0].pageX - this.touch.startX;
            const offsetWidth = Math.min(this.$refs.processBar.clientWidth - progressBtnWidth,Math.max(0,this.touch.left + deltaX));
            this.offsetWidth(offsetWidth);
        },
        processTouchEnd(){
            this.touch.initiated = false;
             this._triggerPercent();
        },
        processClick(e){
            const offsetWidth = e.offsetX
            this.offsetWidth(offsetWidth);
            this._triggerPercent();

        },
        _triggerPercent(){
            const barwidth = this.$refs.processBar.clientWidth-progressBtnWidth;
            const percent = this.$refs.process.clientWidth / barwidth;
            this.$emit('percentChange',percent)
        },
        offsetWidth(offsetwidth){
            this.$refs.process.style.width = `${offsetwidth}px`
            this.$refs.processBtn.style[transform] = `translate3d(${offsetwidth}px, 0px, 0px)`;
        }
    },
    watch:{
        percent(newval){
           if(newval > 0 && !this.touch.initiated){
               const barwidth = this.$refs.processBar.clientWidth-progressBtnWidth;
               const offsetWidth = barwidth * newval;
               this.offsetWidth(offsetWidth);
           }
        }
    }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
.processbar
    height 30px
    .processline
        position relative
        top 13px
        height 4px
        background-color rgba(0,0,0,.3)
        .process
            position absolute
            height 100%
            background-color $color-theme
        .process-btn-wrapper
            position absolute
            height 30px
            width 30px
            top -13px
            left -7px
            .process-btn
                position absolute
                width 16px
                height 16px
                border-radius 50%
                box-sizing border-box
                border 3px solid #fff
                left 7px
                top 7px
                background-color $color-theme


</style>